<template>
	<div>
		<!-- 统计数据区域 -->
		<div class="flex flex-col sm:flex-row gap-[10px]">
			<base-statistic
				img="user"
				title="agent.overview.referrals"
				class="flex-1 bg-[#1B2538] block-label-text"
				style="background-color: #1b2538">
				{{ info.inviteNum }} Players
			</base-statistic>
			<base-statistic
				img="bet"
				title="agent.overview.wagered"
				class="flex-1 bg-[#1B2538] block-label-text"
				style="background-color: #1b2538">
				US$ {{ info.totalBetAmountUSD }}
			</base-statistic>
			<base-statistic
				img="rebates"
				title="agent.overview.earnings"
				class="flex-1 bg-[#1B2538] block-label-text"
				style="background-color: #1b2538">
				US$ {{ info.totalIncome }}
			</base-statistic>
		</div>

		<!-- 计划详情区域 -->
		<div class="mt-4 p-5 bg-[#1B2538] rounded-lg text-t-1">
			<div class="text-lg plan-detail-title">{{ $t('agent.overview.title') }}</div>
			<div class="mt-2 plan-detail-txt">{{ $t('agent.overview.desc1') }}</div>
			<div class="mt-2 plan-detail-txt">{{ $t('agent.overview.desc2') }}</div>
			<div class="mt-2 plan-detail-txt">{{ $t('agent.overview.tip') }}</div>

			<!-- 邀请链接和邀请码 -->
			<div class="mt-5 flex flex-col sm:flex-row gap-[10px]">
				<div class="flex-1">
					<div class="copy-title">{{ $t('agent.overview.link') }}</div>
					<div
						class="mt-2 bg-bg-1 rounded-lg h-[58px] flex justify-between items-center px-3 copy-input">
						<div class="copy-text">{{ `${baseUrl}/?r=${info.inviteCode}` }}</div>
						<base-copy :value="`${baseUrl}/?r=${info.inviteCode}`"></base-copy>
					</div>
				</div>
				<div class="flex-1">
					<div class="copy-title">{{ $t('agent.overview.code') }}</div>
					<div
						class="mt-2 bg-bg-1 rounded-lg h-[58px] flex justify-between items-center px-3 copy-input">
						<div class="copy-text">{{ info.inviteCode }}</div>
						<base-copy :value="info.inviteCode"></base-copy>
					</div>
				</div>
			</div>
		</div>
		<!-- 卡片展示区域 -->
		<div class="mt-5 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
			<!-- 即时返利 -->
			<div class="flex flex-col items-center bg-[#1B2538] rounded-lg p-4">
				<div class="w-[97.2px] h-[80px] p-[19px_15px] flex items-center justify-center">
					<img
						width="width:65px;height:41.7px"
						src="@/assets/img/rebates.svg"
						:alt="$t('agent.overview.rebates')" />
				</div>
				<div class="text-white text-sm font-medium">{{ $t('agent.overview.rebates') }}</div>
			</div>

			<!-- 周奖金月奖金 -->
			<div class="flex flex-col items-center bg-[#1B2538] rounded-lg p-4">
				<div class="w-[97.2px] h-[80px] flex items-center justify-center">
					<img
						src="@/assets/img/weekly-bonus.svg"
						class="w-full h-full"
						:alt="$t('agent.overview.weekly')" />
				</div>
				<div class="text-white text-sm font-medium">{{ $t('agent.overview.weekly') }}</div>
			</div>

			<!-- 忠诚奖励每日充值 -->
			<div class="flex flex-col items-center bg-[#1B2538] rounded-lg p-4">
				<div class="w-[97.2px] h-[80px] p-[19px_15px] flex items-center justify-center">
					<img
						style="width: 65px; height: 47px"
						src="@/assets/img/bonus-cartoos.svg"
						:alt="$t('agent.overview.loyalty')" />
				</div>
				<div class="text-white text-sm font-medium">{{ $t('agent.overview.loyalty') }}</div>
			</div>

			<!-- 损失返还 -->
			<div class="flex flex-col items-center bg-[#1B2538] rounded-lg p-4">
				<div class="w-[97.2px] h-[80px] p-[19px_15px] flex items-center justify-center">
					<img
						style="width: 60px; height: 59px"
						src="@/assets/img/money-pouch.svg"
						:alt="$t('agent.overview.loss')" />
				</div>
				<div class="text-white text-sm font-medium">{{ $t('agent.overview.loss') }}</div>
			</div>

			<!-- VIP升级奖金 -->
			<div class="flex flex-col items-center bg-[#1B2538] rounded-lg p-4">
				<div class="w-[97.2px] h-[80px] p-[19px_15px] flex items-center justify-center">
					<img
						style="width: 54px; height: 70px"
						src="@/assets/img/level-up-bonus.svg"
						:alt="$t('agent.overview.point')" />
				</div>
				<div class="text-white text-sm font-medium">{{ $t('agent.overview.point') }}</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { BaseStatistic, BaseCopy } from '@/components/base'
import { ref, onMounted, reactive } from 'vue'
import { useProfileStore } from '@/store'
import { getOverviewIncome } from '@/api/agent'
import { formatToThousandsWithDecimal, formatNumber } from '@/utils/decimal'
// import { isDesktop } from '@/hooks'

const profileStore = useProfileStore()
console.log(profileStore.userInfo)
const userId = ref<number>()
const userInfo = ref(profileStore.userInfo)
if (userInfo.value) {
	userId.value = userInfo.value.id || 0
}

const info = reactive({
	inviteCode: '',
	inviteNum: '0',
	totalBetAmountUSD: '0.00',
	totalIncome: '0.00'
})

// const platform = isDesktop ? 'pc' : 'h5'
const baseUrl = ref(location.origin)

const option: {
	type: 'fiat' | 'crypto' // 法币 or 加密货币
	platform: 'pc' | 'h5' // 平台
} = {
	platform: 'h5',
	type: 'fiat'
}

const getOverview = async () => {
	const res = await getOverviewIncome({ userId: userId.value as number })

	if (res.code === 200) {
		info.inviteCode = res.data.inviteCode || ''
		info.inviteNum = formatToThousandsWithDecimal(res.data.inviteNum || 0)
		info.totalBetAmountUSD = formatNumber(res.data.totalBetAmountUSD || 0, option)
		info.totalIncome = formatNumber(res.data.totalIncome || 0, option)
	}
}

onMounted(() => {
	getOverview()
})
</script>
<style scoped lang="scss">
// 公共样式 Mixin 定义
@mixin border-radius($radius: 8px) {
	border-radius: $radius;
}

@mixin font-base($size, $lineHeight, $weight, $spacing: 0, $color: inherit) {
	// font-family: 'SF Pro Display';
	font-size: $size;
	font-style: normal;
	font-weight: $weight;
	line-height: $lineHeight;
	letter-spacing: $spacing;
	color: $color;
}

// 通用颜色变量
$text-white: var(--text-1-ffffff, #fff);
$text-gray: var(--text-396-a-5-aa, #96a5aa);
$text-light-gray: var(--text-2-bbc-5-c-7, #bbc5c7);
$bg-dark: var(--bg-11-b-2538, #1b2538);
$bg-light: var(--bg-2131-a-27, #131a27);

.copy-input {
	@include border-radius(8px);
	background: $bg-light;
	height: 58px;
}

.plan-detail-title {
	@include font-base(16px, 24px, 600, 0.08px, $text-white);
	font-feature-settings: 'liga' off;
}

.plan-detail-txt {
	@include font-base(14px, 20px, 600, 0.035px, $text-light-gray);
}

.copy-title {
	@include font-base(14px, 20px, 600, 0.035px, $text-white);
}

.copy-text {
	@include font-base(14px, 20px, 600, 0.035px, $text-white);
}
</style>
